<template>
  <div class="dashuju">
    <div class="body-mask-box"></div>
    <div class="sys-head-wrapper">
      <div class="hd-left">
        <div class="nav-box">
          <router-link to="/dashboard">
            <a class="one-item">
              <i class="el-icon-arrow-left"></i> 返回
            </a>
          </router-link>
          <!-- <a href="javascript:;" data-href="main.html?nkey=arrange" class="one-item">整理项目</a>
          <a href="main-data.html" class="one-item active">大数据展示</a>
          <a href="main.html?nkey=user" class="one-item">系统设置</a>-->
        </div>
      </div>
      <div id="sysHeadMainTitBox" class="main-tit-box">
        <span class="title">重庆市国土整治项目管理系统</span>
      </div>
      <div class="hd-right">
        <!-- <div class="friend-box">
          <span class="clock-box" style="display:none;"><i class="fsi fsi-clock"></i><font id="colckTimeTxt">2015-8-23 14:50 星期一</font></span>
          <span class="user-box"><i class="fsi fsi-user"></i>市农村土地整治中心</span>
          <span class="fg-line">|</span>
          <a href="javascript:;" class="exit-btn" onclick="_SG['user'].logout()">注销</a>
        </div>-->
      </div>
    </div>
    <div class="indexcontentbox" style="overflow:hidden;">
      <div style="float: left;width: 25%;box-sizing: border-box;padding: 0 20px 0 15px;">
        <div class="data-sider-box ds-left-box">
          <div class="xm-area-box data-fx-box">
            <div class="title-box">年度指标完成情况统计</div>
            <div id="xmJdRatioChart" class="df-chart-box" style="height:210px;top:60px;">
              <div class="pie">
                <div class="pie-left">
                  <template>
                    <div
                      id="pie_echarts_l"
                      class="layui-card-body"
                      style="width: 120px; height: 120px;"
                      v-loading="echarts1Loader"
                      element-loading-background="rgba(0, 0, 0, 0)"
                    ></div>
                    <div class="left-cover">
                      <span class="rate">{{ echarts1Data.completeRate }}%</span>
                    </div>
                    <div class="pie-title">农村建设用地复垦</div>
                  </template>
                </div>
                <div class="pie-right">
                  <template>
                    <div
                      id="pie_echarts_r"
                      class="layui-card-body"
                      style="width: 120px; height: 120px;"
                      v-loading="echarts2Loader"
                      element-loading-background="rgba(0, 0, 0, 0)"
                    ></div>
                    <div class="right-cover">
                      <span class="rate">{{ echarts2Data.completedRatio }}%</span>
                    </div>
                    <div class="pie-title">国土综合整治</div>
                  </template>
                </div>
                <div class="pie-line"></div>
              </div>
            </div>
          </div>
          <div class="xm-area-box data-fx-box">
            <div class="title-box" title="项目待办已办(单位：个)">项目待办已办<span class="subSpan">(单位：个)</span></div>
            <div v-loading="dbybLoading" element-loading-background="rgba(0, 0, 0, 0)" id="daiyi_echarts" class="df-chart-box" style="height:192px;top:60px;"></div>
          </div>
          <div class="xm-area-box data-fx-box">
            <div class="title-box" title="本年度农村建设用地复垦专项统计">本年度农村建设用地复垦专项统计</div>
            <div v-loading="nianduLoading" element-loading-background="rgba(0, 0, 0, 0)" id="zhuanxiang_echarts" class="df-chart-box" style="height:250px;top:25px;"></div>
          </div>
        </div>
      </div>
      <div style="float: left;width: 100%;box-sizing: border-box;">
        <div class="data-main-box">
          <div id="applySumBox" class="apply-sum-box">
            <div
              class="map-right-panle"
              v-loading="
              echarts3Loader == false
                ? echarts5Loader == true
                  ? true
                  : false
                : true
              "
              element-loading-background="rgba(0, 0, 0, 0)"
            >
              <div class="item">
                <p class="title">复垦申请量（个）</p>
                <p class="number">{{ echarts3Data.fksql }}</p>
              </div>
              <div class="item">
                <p class="title">复垦项目个数（个）</p>
                <p class="number">{{ echarts3Data.fkxmgs }}</p>
              </div>
              <div class="item">
                <p class="title">综合整治项目数（个）</p>
                <p class="number">{{ echarts5Data.number }}</p>
              </div>
              <div class="item">
                <p class="title">地票交易量（个）</p>
                <p class="number">{{ echarts3Data.dpjyl }}</p>
              </div>
              <div class="item">
                <p class="title">复垦总面积（公顷）</p>
                <p class="number">{{ echarts3Data.fkzmj }}</p>
              </div>
              <div class="item">
                <p class="title">综合整治面积（公顷）</p>
                <p class="number">{{ echarts5Data.totalArea }}</p>
              </div>
            </div>
          </div>
          <div class="map-region-box data-fx-box">
            <div class="title-box">土地整治大数据平台</div>
            <div
              v-loading="areaLoading"
              element-loading-background="rgba(0, 0, 0, 0)"
              id="area_echarts"
              class="df-main-box"
              style="width:100%;height:100%;position:absolute;left:0;top:0;"
            ></div>
          </div>
        </div>
      </div>
      <div style="float: left;width: 30%;box-sizing: border-box;padding: 0 15px 0 20px;">
        <div class="data-sider-box ds-right-box">
          <div class="xm-area-box data-fx-box" style="min-height:400px;">
            <div class="title-box" title="整治总面积排名前十区域面积之和(单位：公顷)">整治总面积排名前十区域面积之和<span class="subSpan">(单位：公顷)</span></div>
            <div v-loading="qsLoading" element-loading-background="rgba(0, 0, 0, 0)" id="mianji_echarts" class="df-chart-box" style="height:350px;top:50px;"></div>
          </div>
          <div class="xm-area-box data-fx-box" style="min-height:392px;">
            <div class="title-box" title="项目分阶段统计(单位：公顷)">项目分阶段统计<span class="subSpan">(单位：公顷)</span></div>
            <div id="xmJdRatioChart" class="df-chart-box" style="height:350px;top:42px;">
              <div class="pie">
                <div class="pie-left">
                  <div
                    id="pie_echarts_two"
                    class="layui-card-body"
                    style="width: 120px; height: 200px;"
                    v-loading="echarts3Loader"
                    element-loading-background="rgba(0, 0, 0, 0)"
                  ></div>
                  <div class="pie-title">农村建设用地复垦</div>
                </div>
                <div class="pie-right">
                  <div
                    id="pie_echarts_two2"
                    class="layui-card-body"
                    style="width: 120px; height: 200px;"
                    v-loading="echarts4Loader"
                    element-loading-background="rgba(0, 0, 0, 0)"
                  ></div>
                  <div class="pie-title">国土综合整治</div>
                </div>
                <div class="pie-line" style="top:61%"></div>
              </div>
            </div>
          </div>
          <!-- <div class="xm-area-box data-fx-box">
            <div class="title-box">
              项目各阶段面积统计及占比
            </div>
            <div id="xmJdRatioChart" class="df-chart-box" style="height:210px;top:60px;"></div>
          </div>-->
        </div>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
import request from "@/utils/request";
import cqMapConfing from "./data.js";

import {
  totalAndArea,
  totalAndArea2,
  echarts1,
  echarts2,
  echarts4
} from "@/api/bigMap";
import { projectDistStatistics,projectScaleTopTen,projectStatusStatistics,queryReclaimProjectStatistics } from "@/api/dashuju";
export default {
  name: "dashuju",
  data() {
    return {
      echarts3Data: "",
      echarts3Loader: false,
      echarts5Data: "",
      echarts5Loader: false,
      echarts1Loader: false,
      echarts2Loader: false,
      echarts4Loader: false,
      echarts1Data: "",
      echarts2Data: "",
      echarts4Data: "",
      areaLoading: false,
      qsLoading:false,
      dbybLoading:false,
      nianduLoading:false,
    };
  },
  mounted() {
    this.totalAndArea();
    this.renderTotalAndArea2();
    this.getEchartsTopData();
    this.renderEcharts4();
    /* echart设置 */
    //设置地区
    this.renderEchartsForArea();
    //设置待办已办
    this.renderEchartsForDbYb();
    //设置二期专项统计
    this.renderEchartsForNiandu();
    //设置面积之和
    this.renderEchartsForQianshi();
  },
  methods: {
    totalAndArea() {
      // 一期统计和面积统计
      // 获取总体统计及各阶段统计数据
      this.echarts3Loader = true;
      totalAndArea()
        .then(res => {
          this.echarts3Loader = false;
          this.echarts3Data = res.data;
          this.$nextTick(() => {
            this.renderChart3();
          });
        })
        .catch(err => {
          this.echarts3Loader = false;
        });
    },
    renderTotalAndArea2() {
      this.echarts5Loader = true;
      totalAndArea2()
        .then(res => {
          this.echarts5Loader = false;
          this.echarts5Data = res.data;
        })
        .catch(err => {
          this.echarts5Loader = false;
        });
    },
    getEchartsTopData() {
      this.echarts1Loader = true;
      this.echarts2Loader = true;
      echarts1()
        .then(res => {
          this.echarts1Loader = false;
          this.echarts1Data = res.data;
          this.$nextTick(() => {
            this.renderChart1();
          });
        })
        .catch(err => {
          this.echarts1Loader = false;
        });
      echarts2()
        .then(res => {
          this.echarts2Loader = false;
          this.echarts2Data = res.data;
          this.$nextTick(() => {
            this.renderChart2();
          });
        })
        .catch(err => {
          this.echarts2Loader = false;
        });
    },
    renderEcharts4() {
      this.echarts4Loader = true;
      echarts4()
        .then(res => {
          this.echarts4Loader = false;
          this.echarts4Data = res.data;
          this.$nextTick(() => {
            this.renderChart4();
          });
        })
        .catch(err => {
          this.echarts4Loader = false;
        });
    },
    renderEchartsForArea(){
      this.areaLoading = true
      projectDistStatistics().then(res =>{
        this.areaLoading = false
        this.setAreaChart(res.data)
      }).catch(err => {
        this.areaLoading = false;
      });
    },
    renderEchartsForQianshi(){
      this.qsLoading = true
      projectScaleTopTen().then(res =>{
        this.qsLoading = false
        this.setmianji(res.data)
      }).catch(err => {
        this.qsLoading = false;
      });
    },
    renderEchartsForDbYb(){
      this.dbybLoading = true
      projectStatusStatistics().then(res =>{
        this.dbybLoading = false
        this.setdaiyiChart(res.data)
      }).catch(err => {
        this.dbybLoading = false;
      });
    },
    renderEchartsForNiandu(){
      this.nianduLoading = true
      queryReclaimProjectStatistics().then(res =>{
        this.nianduLoading = false
        this.setzhuanxiang(res.data)
      }).catch(err => {
        this.nianduLoading = false;
      });
    },
    //设置面积之和
    setmianji(data) {
      let chart6 = echarts.init(document.getElementById("mianji_echarts"));
      var areaArr = []
      var areaData = []
      data.forEach(v =>{
        areaArr.push(v.districtName)
        areaData.push(v.sdsshxmj)
      })
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "category",
          data: areaArr,
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          nameGap: 25
        },
        series: [
          {
            type: "bar",
            // label: {
            //   normal: {
            //     show: true,
            //     position: "insideRight"
            //   }
            // },
            data: areaData
          }
        ]
      };
      chart6.setOption(option);
    },
    //设置二期专项统计(规模)
    setzhuanxiang(data) {
      let chart5 = echarts.init(document.getElementById("zhuanxiang_echarts"));
      var shenduArr = []
      var duliArr = []
      shenduArr.push(data.sdpkxzCityCertificateArea)
      shenduArr.push(data.sdpkxzSpotReviewArea)
      shenduArr.push(data.sdpkxzDistrictAcceptanceArea)
      shenduArr.push(data.sdpkxzCompletionArea)
      shenduArr.push(data.sdpkxzImplementingArea)
      shenduArr.push(data.sdpkxzCityRecordedArea)
      shenduArr.push(data.sdpkxzDistrictStoringRecordArea)

      duliArr.push(data.dljkpkhCityCertificateArea)
      duliArr.push(data.dljkpkhSpotReviewArea)
      duliArr.push(data.dljkpkhDistrictAcceptanceArea)
      duliArr.push(data.dljkpkhCompletionArea)
      duliArr.push(data.dljkpkhImplementingArea)
      duliArr.push(data.dljkpkhCityRecordedArea)
      duliArr.push(data.dljkpkhDistrictStoringRecordArea)
      var option = {
        color: ["#999", "#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "category",
          data: [
            "区县申报备案",
            "市级已备案",
            "已开工实施",
            "已复垦竣工",
            "区县已验收",
            "市级抽查复核",
            "市级已配号"
          ],
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          nameGap: 25
        },
        series: [
          {
            name: "深度贫困乡镇",
            type: "bar",
            stack: "专项统计",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: shenduArr
          },
          {
            name: "独立建卡贫困户",
            type: "bar",
            stack: "专项统计",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: duliArr
          }
        ]
      };
      chart5.setOption(option);
    },
    //设置待办已办
    setdaiyiChart(data) {
      let chart4 = echarts.init(document.getElementById("daiyi_echarts"));
      var daibanArr = []
      var yibanArr = []
      daibanArr.push(data.reclaimPending)
      daibanArr.push(data.renovationPending)
      yibanArr.push(data.reclaimFinished)
      yibanArr.push(data.renovationFinished)
      var option = {
        color: ["#999", "#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["待办项", "已办项"],
          textStyle: {
            color: "#fff"
          },
          top:'20'
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        xAxis: {
          type: "category",
          data: ["农村建设用地复垦", "国土综合整治"],
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            name: "待办项",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: daibanArr
          },
          {
            name: "已办项",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: yibanArr
          }
        ]
      };
      chart4.setOption(option);
    },
    //设置区域
    setAreaChart(data) {
      let chart3 = echarts.init(document.getElementById("area_echarts"));
      var areaData = []
      data.forEach(v=>{
        var obj = {
          name:v.regionName,
          id:v.regionId,
          reclaimPending:v.reclaimPending,
          renovationPending:v.renovationPending,
        }
        areaData.push(obj)
      })

      echarts.registerMap("重庆市", cqMapConfing); /* 地图注册 */
      var chongqingdatas = areaData
      var option = {
        visualMap: {
          show: false,
          min: 0,
          max: 50000,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          calculable: false,
          inRange: {
            color: ["#1e91d3", "#1e91d3"]
          }
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          backgroundColor: "#c6e8e9",
          transitionDuration: 0.2,
          formatter: function(params) {
            var c = params["data"] || {};
            var p ='<p style="color:#26677b;font-size:12px;">复垦待办数量：' +(c["reclaimPending"] || 0) +"</p>";
            p +='<p style="color:#26677b;font-size:12px;">整治待办数量：' +(c["renovationPending"] || 0) +"</p>";
            // console.log(params)
            return p;
          }
        },
        series: [
          {
            type: "map",
            map: "重庆市",
            roam: false,
            aspectScale: 1.1,
            zoom: 1.1,
            itemStyle: {
              normal: {
                areaColor: "rgba(30, 145, 211, 0.6)",
                label: {
                  show: false
                },
                borderWidth: 1,
                borderColor: "#34a9cf"
              },
              emphasis: {
                areaColor: "rgba(30, 145, 255, 1)",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  }
                },
                borderWidth: 2,
                borderColor: "#5cd0f6"
              }
            },
            renderItem: function(params, api) {
              //具体实现自定义图标的方法
              // console.log(params);
            },
            data: chongqingdatas
          },
          {
            name: "city",
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#389BB7"
              }
            },
            data: [{ name: "合川区" }]
          }
        ]
      };
      chart3.setOption(option);

      chart3.on("click", function(params) {
        // console.log(params,"aaaaaaaaaaaaaaaaaaaaaaaa")
      });
    },
    //上部分Echarts
    renderChart1() {
      let chart1 = echarts.init(document.getElementById("pie_echarts_l"));
      // 指定图表的配置项和数据
      let option = {
        color: ["#49A0F4", "#B7D8F8"],
        tooltip: {
          show: false
        },
        label: {
          normal: {
            position: "inner",
            show: false
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        series: [
          {
            type: "pie",
            radius: ["100%", "70%"],
            avoidLabelOverlap: false,
            data: [
              { value: this.echarts1Data.completeRate },
              { value: 100 - this.echarts1Data.completeRate }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      chart1.setOption(option);
    },
    renderChart2() {
      let chart2 = echarts.init(document.getElementById("pie_echarts_r"));
      // 指定图表的配置项和数据
      let option = {
        color: ["#49A0F4", "#B7D8F8"],
        tooltip: {
          show: false
        },
        label: {
          normal: {
            position: "inner",
            show: false
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        series: [
          {
            type: "pie",
            radius: ["100%", "70%"],
            data: [
              { value: this.echarts2Data.completedRatio },
              { value: 100 - this.echarts2Data.completedRatio }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      chart2.setOption(option);
    },
    //下部分Echarts
    renderChart3() {
      var chart3 = echarts.init(document.getElementById("pie_echarts_two"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          itemHeight: 10,
          top: "0",
          left: "center",
          textStyle: {
            //图例文字的样式
            color: "rgba(128,128,128,1);",
            fontSize: 11
          },
          data: [
            {
              name: "前期测绘面积",
              icon: "circle"
            },
            {
              name: "入库备案面积",
              icon: "circle"
            },
            {
              name: "竣工测绘面积",
              icon: "circle"
            }
          ]
        },
        color: ["#50A3F8", "#FCC64D", "#50D1F8"],
        series: [
          {
            name: "单位：公顷",
            type: "pie",
            center: ["50%", "70%"],
            radius: "100%",
            data: [
              { value: this.echarts3Data.qqchmj, name: "前期测绘面积" },
              { value: this.echarts3Data.rkbamj, name: "入库备案面积" },
              { value: this.echarts3Data.jgchmj, name: "竣工测绘面积" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      chart3.setOption(option);
    },
    renderChart4() {
      var chart4 = echarts.init(document.getElementById("pie_echarts_two2"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          itemHeight: 10,
          top: "0",
          left: "center",
          textStyle: {
            //图例文字的样式
            color: "rgba(128,128,128,1);",
            fontSize: 11
          },
          data: [
            {
              name: "前期测绘面积",
              icon: "circle"
            },
            {
              name: "入库备案面积",
              icon: "circle"
            },
            {
              name: "竣工测绘面积",
              icon: "circle"
            }
          ]
        },
        color: ["#50A3F8", "#FCC64D", "#50D1F8"],
        series: [
          {
            name: "单位：公顷",
            type: "pie",
            center: ["50%", "70%"],
            radius: "100%",
            data: [
              {
                value: this.echarts4Data.prophaseSurveyArea,
                name: "前期测绘面积"
              },
              {
                value: this.echarts4Data.storeAdministrationArea,
                name: "入库备案面积"
              },
              {
                value: this.echarts4Data.completedSurveyArea,
                name: "竣工测绘面积"
              }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            itemStyle: {
              normal: {
                label: {
                  show: false //隐藏标示文字
                },
                labelLine: {
                  show: false //隐藏标示线
                }
              }
            },
            hoverAnimation: false,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      chart4.setOption(option);
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/jedate.css";
@import "../../assets/js/vendor/ztree/css/ztree.css";
@import "../../assets/css/data.css";

.map-right-nav {
  height: 40px;
  font-size: 12px;
  // font-family:Microsoft YaHei;
  font-weight: 400;
  line-height: 40px;
  color: rgba(128, 128, 128, 1);
  padding: 0 0 0 20px;
  box-sizing: border-box;
  opacity: 1;
}

.map-right-nav ul {
  height: 100%;
  padding: 0;
  margin: 0;
}

.map-right-nav ul li {
  float: left;
  margin-right: 20px;
  list-style: none;
  height: 102%;
  cursor: pointer;
}

.map-right-nav ul li.on {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  font-size: 14px;
  // font-family:Microsoft YaHei;
  font-weight: 600;
}

.map-right-panle {
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.map-right-panle .item {
  // width: 130px;
  min-width: 30%;
  height: 120px;
  background: linear-gradient(
    134deg,
    rgba(102, 213, 254, 1) 0%,
    rgba(61, 122, 227, 1) 100%
  );
  opacity: 1;
  border-radius: 4px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 8px;
  text-align: center;
}

.map-right-panle .item:nth-child(2) {
  background: linear-gradient(
    134deg,
    rgba(113, 251, 224, 1) 0%,
    rgba(58, 219, 226, 1) 100%
  );
}

.map-right-panle .item:nth-child(3) {
  background: linear-gradient(
    134deg,
    rgba(106, 250, 150, 1) 0%,
    rgba(43, 224, 78, 1) 100%
  );
}

.map-right-panle .item:nth-child(4) {
  background: linear-gradient(
    134deg,
    rgba(251, 182, 113, 1) 0%,
    rgba(230, 140, 62, 1) 100%
  );
}

.map-right-panle .item:nth-child(5) {
  background: linear-gradient(
    134deg,
    rgba(236, 112, 250, 1) 0%,
    rgba(178, 62, 230, 1) 100%
  );
}

.map-right-panle .item:nth-child(6) {
  background: linear-gradient(
    134deg,
    rgba(115, 252, 169, 1) 0%,
    rgba(34, 213, 105, 1) 100%
  );
}

.map-right-panle .item .title {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 20px;
  color: #f5f5f5;
  opacity: 1;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

.map-right-panle .item .number {
  font-size: 30px;
  font-family: Roboto;
  font-weight: 400;
  color: rgba(250, 250, 250, 1);
  padding: 0;
  margin: 0;
  margin-top: 20px;
  text-align: center;
}
.pie {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.pie .pie-left,
.pie .pie-right {
  position: relative;
  text-align: center;
}

.left-cover,
.right-cover {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  // background-color: #fff;
  left: 50%;
  top: 50%;
  margin-left: -43px;
  margin-top: -55px;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.pie .rate {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  display: block;
  // margin-top: 10px;
}

.pie-line {
  width: 0px;
  height: 70px;
  border: 1px dashed rgba(213, 213, 213, 1);
  opacity: 1;
  position: absolute;
  left: 49%;
  top: 50%;
  margin-top: -46px;
}

.pie-title {
  font-size: 12px;
  // padding-left: 38px;
  margin-top: 12px;
  color: #fff;
  text-align: center;
}
.subSpan{
  font-size: 14px;
  color: #fff;
}
.data-fx-box{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.data-fx-box .title-box {
  font-size: 20px !important;
}
@media screen and (max-width: 1460px) {
  .map-right-panle .item .title {
    font-size: 16px;
  }
}
@media screen and (max-width: 1240px) {
  .map-right-panle .item .title {
    font-size: 13px;
  }
}
</style>
